<template>
	<view class="tost" v-if="isShow">
		<view class="">
			<view class="signheader">
				<image src="../static/home/signin/qdt.png" mode="widthFix" style="width: 360rpx;"></image>
			</view>
			<view class="signbox">
				<view class="title">
					连续签到第<text>{{signInfo.continuousDay}}</text>天，获得
					<text> {{calculateTotalPoints(signInfo.continuousDay)  || ''}}</text>积分
				</view>
				<view class="tip">
					连续签到{{week.length}}天，可获得{{calculateTotalPoints(7)}}积分
				</view>
				<view class="signGold">
					<view v-for="(item,index) in week" :key="index" class="gold" @click="handleSign(item)">
						<view class="goldimg img1" v-if="signInfo.continuousDay>index">
							<view class=""> +{{item.point}} </view>
							<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
						</view>
						<view class="goldimg img2" v-else>
							<view class=""> +{{item.point}} </view>
							 <image src="@/static/jinbi.png" mode="widthFix"></image>
						</view>
						<view :style="{color:signInfo.continuousDay>index?'#666666':'#999999'}">第{{item.day}}天</view>
					</view>
				</view>
			</view>
			<view class="btn">
				 <image src="../static/home/share-toast/close.png" mode="widthFix"
				  style="width: 80rpx;" @click="isShow=false"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {signCreateAPI,signListAPI,signInfoAPI} from "@/api/home.js"
	export default {
		name:"woods-siginin",
		props:{
			// isShow:{
			// 	type:Boolean,
			// 	default:false
			// }
		},
		data() {
			return {
				isShow:false,
				week:[],
				day:2,
				signInfo:{
					"totalDay": 0,
					"continuousDay": 0,
					"todaySignIn": true
				}
			};
		},
		watch:{
			isShow(visible){
				this.$emit("visible",visible)
			}
		},
		created() {
			this.getlist()
		},
		methods:{
			calculateTotalPoints(index) {
				let total = 0;
				for (let i = 0; i < index; i++) {
					total += this.week[i].point || 0;
				}
				return total;
			},
			async getlist(){
				this.signInfo=await signInfoAPI()
				this.week=await signListAPI()
				 
			},
			handleSign(){
				if(this.signInfo.todaySignIn){
					return uni.showToast({title:'今日已签到！',icon:'none'})
				}
				signCreateAPI().then(res=>{
					this.getlist()
					uni.showToast({
						title:'签到成功'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.tost{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	.signheader{
		 
		position: relative;
		bottom: -70rpx;
		text-align: center;
	}
	.signbox{
		 
		width: 630rpx;
		 
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
		.title{
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: center;
			margin-top: 20rpx;
			text{
				font-weight: bold;
				font-size: 40rpx;
				color: #F93A59;
				line-height: 47rpx;
			}
		}
		.tip{
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #AAAAAA;
			line-height: 28rpx;
			text-align: center; 
		}
		.signGold{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			.gold{
				margin:10rpx 10rpx;
				text-align: center;
				.goldimg{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 120rpx;
					height: 120rpx;
					border: 1px solid #FFCB00;
					border-radius: 2rpx;
					margin:8rpx 0;
					padding-bottom: 5rpx;
				}
				.img1{
					background-color:#FFE066;
					 
					view{
						color: #F93A59;
						font-weight: bold;
						font-size: 36rpx;
						margin: 10rpx;  
					}
				}
				.img2{
					background-color:#FFFAEA;
					
					view{
						color: #FBB11B;
						font-weight: 400;
						font-size: 25rpx;
						margin: 10rpx; 
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
				image{
					width: 120rpx;
					height: 120rpx;
				}
				view{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}
	}
	
	
	.btn{
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		 
	}
	
}
</style>